<script setup lang="ts">
  import { ref } from "vue";
  import { useDictStore } from "@/stores";
  import DictGroup from "./group/index.vue";

  const dictStore = useDictStore();
  const modalVisible = ref(false);
  const dicts = ref<any>([]);
  const dict = ref<any>({});
  const dictGroup = ref<any>({});

  async function fetchList() {
    dicts.value = await dictStore.getDicts();
  }

  function handleAdd() {
    dict.value = {};
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    dict.value = record;
    modalVisible.value = true;
  }

  async function handleRemove(record: any) {
    await dictStore.deleteDict({ id: record.id });
    dicts.value = dicts.value.filter((item: any) => item.id !== record.id);
  }

  async function handleSave() {
    console.log(dictGroup.value);
    await dictStore.saveDict({ ...dict.value, groupCode: dictGroup.value.code });
    await fetchList();
    modalVisible.value = false;
  }

  function handleDictGroupSelect(record: any) {
    dictGroup.value = record;
    fetchList();
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['系统管理', '字典列表']"></Breadcrumb>
    <a-row :gutter="16">
      <a-col :span="4">
        <DictGroup @select="handleDictGroupSelect" />
      </a-col>
      <a-col :span="20">
        <a-card :bordered="false">
          <a-button type="primary" size="small" style="margin-bottom: 16px" @click="handleAdd">新增</a-button>
          <a-table :data="dicts">
            <template #columns>
              <a-table-column title="字典名称" data-index="label" />
              <a-table-column title="字典编码" data-index="code" />
              <a-table-column title="字典的值" data-index="value" />
              <a-table-column title="主题颜色" data-index="theme" />
              <a-table-column title="操作" :width="180">
                <template #cell="{ record }">
                  <a-space>
                    <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
                    <a-popconfirm content="您确认移除此记录么？" @ok="handleRemove(record)">
                      <a-button type="primary" size="small" status="danger">移除</a-button>
                    </a-popconfirm>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :visible="modalVisible" title="字典资料" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="字典标签">
          <a-input placeholder="请输入字典标签" v-model="dict.label"></a-input>
        </a-form-item>
        <a-form-item label="字典编码">
          <a-input placeholder="请输入字典编码" v-model="dict.code"></a-input>
        </a-form-item>
        <a-form-item label="字典的值">
          <a-input placeholder="请输入字典的值" v-model="dict.value"></a-input>
        </a-form-item>
        <a-form-item label="主题颜色" style="margin-bottom: 0">
          <a-input placeholder="请输入主题颜色" v-model="dict.theme"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
